<template>
  <div class="content">
    <div
      class="rank-content"
      :id="id"
      :color="color"
      :hollow="hollow"
    ></div>
  </div>
</template>

<script>
export default {
  props: {
    pieData: {
      type: String,
      default: ""
    },
    hollow: {
      type: Boolean,
      default: true
    },
    color: {
      type: Array,
      default: () => {
        return [
          "#0DE8FB",
          "#0E6DE9",
          "#F4CD28",
          "#499A6F",
          "#A3D804",
          "#DE6B00"
        ];
        // return ['#0DE8FB', '#DE6B00', '#F4CD28']
      }
    },
    setKey: {
      type: Object
    },
    labelLine: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      id: "",
      chart: ""
    };
  },
  created() {
    this.id = "smPie-" + Math.random();
  },
  mounted() {
    this.$nextTick(() => {
      this.initBar();
    });
  },
  watch: {
    pieData(data) {
      this.initBar();
    }
  },

  methods: {
    initBar() {
      let source = [];
      if (this.pieData !== undefined && this.pieData !== null) {
        let length = this.pieData.length;
        let percent = Number(this.pieData.substring(0, length - 1));
        // console.log("percent:" + percent);
        // debugger;
        source = [
          {
            count: 100 - percent
          },
          {
            count: percent
          }
        ];

        // debugger;
        let option = {
          tooltip: {
            trigger: "item",
            formatter: "{d}%",
            show: false
          },
          color: this.color,
          series: [
            {
              type: "pie",
              startAngle: 160,
              center: ["50%", "50%"],
              radius: ["50%", "75%"],
              hoverAnimation: false,
              avoidLabelOverlap: true,
              label: {
                normal: {
                  show: false,
                  position: "center",
                  // position: this.labelLine ? "outside" : "center",
                  formatter: function(params) {
                    let arr = [
                      "{b|█ " + params.name + "}",
                      "{a|" + "/" + params.percent + "%" + "}"
                    ];
                    return arr;
                  },
                  textStyle: {
                    rich: {
                      a: {
                        color: "#fff"
                      }
                    }
                  }
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: "20",
                    fontWeight: "bold"
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false,
                  length: 10,
                  length2: 20
                }
              }
            }
          ],
          dataset: {
            source: source
          }
        };
        this.chart = this.$echarts.init(document.getElementById(this.id));
        this.chart.setOption(option);
        window.addEventListener("resize", () => {
          this.chart.resize();
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.content {
  height: 100px;
  display: flex;
  flex-flow: column;
  // background-color: #009896;

  .rank-content {
    flex: 1;
  }
}
</style>
